<template>
<view class="pop-wrap">
  <view class="pop-content">
    <view class="pop-content-top">
      <view class="pop-content-top-text">
        <text class="new">{{$t('version')}}</text>
        <text class="v">{{updateInfo.vv}}</text>
      </view>
    </view>
    <view class="pop-content-update-text">
      <view class="upgrade-notes" v-text="updateInfo.c"></view>
      <view class="footer">
		  <view v-if="updateStatus">
			   <button form-type="submit" @click="onUpdate" shape="circle" size="large" long type="primary" class="hb-button updata" style="margin-bottom:20rpx;">{{$t('version.now')}}</button>
			  
			   <button shape="circle" size="large" long type="default" class="hb-button cale">{{$t('version.cancel')}}</button>
		  </view>
        <view v-else class="footV">
          <hb-progress :percent="percent"></hb-progress>
          <text class="download">{{$t('version.Downloading')}}</text>
        </view>
      </view>
    </view>
  </view>
</view>
</template>
<script>
import HbProgress from "@/components/hb-progress";
export default {
  name: "hb-app-update",
  components: {HbProgress},
  props: {
    updateInfo: {
      default: function () {
        return {}
      },
      type: Object
    }
  },
  data() {
    return {
      updateStatus: true,
      percent: 0
    }
  },
  methods: {
    onCancel() {
      this.$emit('cancel');
    },
    onUpdate() {
      let isWgt = this.updateInfo.u.substring(this.updateInfo.u.length - 3);
      this.updateStatus = false;
      if (isWgt == 'wgt') {
        this.onDownloadWgt(this.updateInfo.u);
      } else {
        this.onDownloadApp(this.updateInfo.u);
      }
    },
    onDownloadApp(url) {
      let _this = this;
      if (uni.getSystemInfoSync().platform == 'ios') {
        plus.runtime.openURL(url);
      } else {
        let dTask = plus.downloader.createDownload(url, {}, function(d, status){
          if(status == 200){
            let path = d.filename;
            plus.runtime.install(path);  // 安装下载的apk文件
          }else{
            uni.showModal({
              content: 'fail',
              showCancel: false
            })
          }
          uni.hideLoading();
        });
      }
    }
  }
}
</script>

<style scoped lang="scss">
.pop-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  padding: 0 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  .pop-content {
    box-sizing: border-box;
    width: 100%;
    border-radius: 16rpx;
    overflow: hidden;
    &-top {
      background: url("~@/static/images/update-bg.png");
      background-size: 100% 100%;
      padding: 0 32rpx;
      height: 290rpx;
      overflow: hidden;
      .close {
        margin-top: 24rpx;
        text-align: right;
        color: #fff;
        .iconfont {
          font-size: 40rpx
        }
      }
      &-text {
        color: #fff;
		margin-top:110rpx;
        .new {
          display: block;
          margin-top: 10rpx;
          font-size: 36rpx
        }
        .v {
          display: block;
          font-size: 32rpx
        }
      }
    }
    &-update-text {
      background: #fff;
      padding: 0 32rpx;
      padding-bottom: 32rpx;
      .upgrade-notes {
        color: $hb-text-color;
        font-size: 28rpx;
        height: 200rpx;
        overflow-y: scroll;
      }
      .footer {
        margin-top: 20rpx;
        height: 180rpx;
		position: relative;
		.updata{
			width:100%;
			height:74rpx;
			padding:0;
			background:$hb-primary-color;
			border-radius:8rpx;
			border:0;
			line-height:74rpx;
			font-size:32rpx;
		}
		uni-button:after{
			border:0
		}
		.cale{
			width:98%;
			margin:auto;
			height:72rpx;
			padding:0;
			line-height:72rpx;
			background: none!important;
			border:1px solid #c6cfd8;
			color: #c6cfd8;
			font-size:32rpx;
		}
        .download {
          display: block;
          margin-top: 24rpx;
          text-align: center;
          color: $uni-text-color-grey;
          font-size: 24rpx;
        }
		.footV{
			width:100%;
			position: absolute;
			bottom:40rpx;
			left:0;
		}
      }
    }
  }
}
</style>
